<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>同步课程</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2384888_ojge9md3tr.css
    ">
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../css/online.css">
</head>

<body>
    <!-- 导航菜单 -->
    <nav>
        <div class="main">
            <img src="../img/public/logo.png" alt="" class="logo">
            <ul>
                <li><a href="../index.html">首页</a></li>
                <li class="check"><a href="javascript:;">同步课程</a></li>
                <li><a href="javascript:;">精品课程</a></li>
            </ul>
            <div class="search">
                <div class="left">课程<i class="iconfont icon-down"></i>
                </div>
                <input type="text" placeholder="搜索感兴趣的内容" id="keyword">
                <img src="../img/public/search.png" alt="" id="searchBtn">
            </div>
            <div class="login">
                <a href="javascript:;">登陆</a>
                /
                <a href="javascript:;">注册</a>
            </div>
            <div class="user">
                <img src="../img/login/user.png" alt="">
                <div class="userlist">
                    <ul>
                        <li id="ImUsername">我是用户名</li>
                        <li><a href="./course.html">课程中心</a></li>
                        <li>订单中心</li>
                        <li>资金管理</li>
                        <li><a href="./userSeting.html">个人中心</a></li>
                        <li class="out">退出登陆</li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主体内容 -->
    <main>
        <div class="row">
            <div class="left">热门城市</div>
            <div class="right">
                <ul id="city" class="filter_course">
                    <li t="area" v=""><a class="active">不限</a></li>
                    <!-- <li><a>北京</a></li>
                    <li><a>上海</a></li>
                    <li><a>江苏</a></li>
                    <li><a>济南</a></li>
                    <li><a>河南</a></li>
                    <li><a>天津</a></li>
                    <li><a>沈阳</a></li>
                    <li><a>石家庄</a></li> -->
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="left">按年级选择</div>
            <div class="right">
                <ul id="grade" class="filter_course">
                    <li t="grade" v=""><a class="active">不限</a></li>
                    <!-- <li><a>一年级</a></li>
                    <li><a>二年级</a></li>
                    <li><a>三年级</a></li>
                    <li><a>四年级</a></li>
                    <li><a>五年级</a></li>
                    <li><a>六年级</a></li>
                    <li><a>初一</a></li>
                    <li><a>初二</a></li>
                    <li><a>初三</a></li>
                    <li><a>高一</a></li>
                    <li><a>高二</a></li>
                    <li><a>高三</a></li> -->
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="left">按学科选择</div>
            <div class="right">
                <ul id="subject" class="filter_course">
                    <li t="subject" v=""><a class="active">不限</a></li>
                    <!-- <li><a>语文</a></li>
                    <li><a>数学</a></li>
                    <li><a>英语</a></li>
                    <li><a>生物</a></li>
                    <li><a>历史</a></li>
                    <li><a>政治</a></li>
                    <li><a>物理</a></li> -->
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="left">按类别选择</div>
            <div class="right">
                <ul id="cate" class="filter_course">
                    <li t="category" v=""><a class="active">不限</a></li>
                    <!-- <li><a class="active">期中</a></li>
                    <li><a>期末</a></li>
                    <li><a>小升初</a></li> -->
                </ul>
            </div>
        </div>
        <div class="lesson">
            <ul id="course">
                <!-- <li>
                    <div class="top">
                        <img src="../img/online/banner1-1.png" alt="" class="m">
                        <p>学科：英语</p>
                    </div>
                    <div class="bottom">
                        <div class="left">
                            <span>人教版语文第一节课程内容讲解</span>
                            <span class="time">地区：北京</span>
                        </div>
                        <div class="right">免费学习</div>
                    </div>
                </li> -->
            </ul>
        </div>

        <div class="pageNum">
            <!-- <button>上一页</button> -->
            <ul id="page" class="filter_course">
                <!-- <li class="active">1</li>
                <li>2</li>
                <li>3</li> -->
            </ul>
            <!-- <button class="active">下一页</button> -->
        </div>
    </main>

    <footer>
        <div class="cont">
            <div class="main">
                <p>
                    首页 | 关于我们 | 加入我们 | 合作专区 | 联系我们 | AI开放平台 | 意见反馈 | 漏洞提交 | 隐私政策 | 版权声明 | 反盗链声明 | 网上有害信息举报 | 备案公示 | 营业执照
                    | 教师资格证公示

                </p>
                <p>
                    京ICP备 13030888号 Copyright © 2014-2019 行者信息科技（北京）有限公司 | 地址：北京市新华区马当路388号C座 | 电话：010-66666666 | 京公网安备
                    01010102002533号
                </p>
                <p>
                    京网文〔2018〕4086-308号 | 网络文化经营许可证：沪网文[2018]4086-308号 | 增值电信业务经营许可证：京B2-20150021 |
                    食品经营许可证：JY13101140088888
                </p>
                <p>医疗器械经营许可证：京嘉食药监械经营许20188008号 | 互联网药品信息服务资格证书：(京)-经营性-2018-0011 |</p>
            </div>
        </div>
    </footer>



    <!-- <script src="../js/ujiuye.js"></script> -->

</body>
<script src="../utils/jquery.min.js"></script>
<script src="../utils/Http.js" type="module"></script>
<script src="../js/myRender.js" type="module"></script>
<script type="module">
    import Http from '../utils/Http.js'
    import {userinfo,fsToObj,showLoginAndRegister,getSearch} from '../js/myRender.js'
    showLoginAndRegister()
    getSearch()
    //分类-地区 渲染
    async function getCity() {
        let {
            result
        } = await Http({
            url: '/api/areas',
        })
        let cityCon = '';
        result.result.forEach(item => {
            cityCon += `<li t="area" v="${item.area_name}"><a>${item.area_name}</a></li>`;
        })
        $('#city').append(cityCon);
    }
    getCity()
    //分类-年级 渲染
    async function getGrades() {
        let {
            result
        } = await Http({
            url: '/api/grades',
        })
        let gradeCon = '';
        result.result.forEach(item => {
            gradeCon += `<li t="grade" v="${item.grade_name}"><a>${item.grade_name}</a></li>`;
        })
        $('#grade').append(gradeCon)
    }
    getGrades()
    //分类-学科 渲染
    async function getSubjects() {
        let {
            result
        } = await Http({
            url: '/api/subjects',
        })
        let subjectCon = '';
        result.result.forEach(item => {
            subjectCon += `<li t="subject" v="${item.subject_name}"><a>${item.subject_name}</a></li>`;
        })
        $('#subject').append(subjectCon)
    }
    getSubjects()
    //分类-考试类别 渲染
    async function getCates() {
        let {
            result
        } = await Http({
            url: '/api/cates',
        })
        let cateCon = '';
        result.result.forEach(item => {
            cateCon += `<li t="category" v="${item.category_name}"><a>${item.category_name}</a></li>`;
        })
        $('#cate').append(cateCon)
    }
    getCates()

    //传入 获取课程列表的数据
    let inData = {
        nowPage: 1,
        pageSize: 5,
        // area: '',
        // grade: '',
        // subject: '',
        // category: '',
    }
    //分类-课程列表 获取数据
    async function getCourse() {
        //解构传入的对象 可以传参也可以不传参 因为inData是全局变量 在函数内使用的时候 会向上查找
        let {
            nowPage,
            pageSize: setPageSize,
            area,
            grade,
            subject,
            category,
        } = inData
        let {
            result
        } = await Http({
            url: '/api/courses',
            data: { //ajax请求 传入这些数据
                page: nowPage,
                pageSize: setPageSize,
                area,
                grade,
                subject,
                category,
            }
        })
        if (result.status != 200) {
            let data = [];
            let page = 0;
            let totalPage = 0;
            renderCourse(data);
            renderPage(page, totalPage);
            return;
        }
        //赋值解构获取的数据
        let {
            data,
            page,
            pageSize,
            rows,
            totalPage
        } = result.result;
        // console.log(result.result);
        renderCourse(data);
        renderPage(page, totalPage);
    }
    //渲染当前页码的课程
    function renderCourse(data) {
        let courseCon = '';
        data.forEach(item => {
            courseCon += `
                <li>
                    <div class="top">
                        <img src="${item.image_src}" alt="" class="m">
                        <p>学科：${item.subject_name}</p>
                    </div>
                    <div class="bottom">
                        <div class="left">
                            <span>${item.title}</span>
                            <span class="time">地区：${item.area_name}</span>
                        </div>
                        <a href="./videoDetail.html?id=${item.cid}" target="_blank"
                            class="right toCourse">${item.price ==0? '免费学习':item.price +'元'}</a>
                    </div>
                </li>
            `;
        })
        $('#course').html(courseCon)
    }
    //渲染页码
    function renderPage(page, totalPage) {
        let pageLi = '';
        pageLi += `<button t="nowPage" v="${page-1<=1 ? 1 : page-1}"
            class="${page>1 && totalPage > 1 ? 'active' : ''}">上一页</button>`;
        for (var i = 0; i < totalPage; i++) {
            pageLi += `<li t="nowPage" v="${i+1}" class="${page == i+1 ?'active':''}">${i+1}</li>`;
        }
        pageLi +=
            `<button t="nowPage" v="${page+1>=totalPage ? totalPage : page+1}"
                class="${page<totalPage && totalPage > 1 ? 'active' : ''}">下一页</button>`;
        $('#page').html(pageLi);
    }
    getCourse()

    // $('#page').on('click', 'li,button', function () {
    //     inData.nowPage = $(this).attr('v');
    //     getCourse();
    //     // console.log($(this).html());
    // })
    //筛选点击
    $('.filter_course').on('click', 'li,button', function () {
        inData.nowPage = 1; //每次点击都把当前页码刷新成1
        let key = $(this).attr('t');
        inData[key] = $(this).attr('v');
        //渲染筛选分类的背景
        $(this).find('a').addClass('active')
        $(this).siblings().find('a').removeClass('active')
        getCourse();
    })
</script>

</html>